import { ref, onMounted, onUnmounted } from 'vue'
import { fetchResourceMonitorData } from '../api/resourceMonitor'

/**
 * 资源监控组合式函数
 * @returns {Object} 资源监控相关的状态和方法
 */
export const useResourceMonitor = () => {
  // 初始化图表数据
  const gpuUsageData = ref({
    edge1: [0.0, 0.0, 0.0, 0.0, 0.0],
    edge2: [0.0, 0.0, 0.0, 0.0, 0.0],
    cloud: [0.0, 0.0, 0.0, 0.0, 0.0]
  })

  const networkDelayData = ref({
    edge1: [0.0, 0.0, 0.0, 0.0, 0.0],
    edge2: [0.0, 0.0, 0.0, 0.0, 0.0]
  })

  let dataFetchTimer = null
  let errorCount = 0 // 错误计数器
  const MAX_ERRORS = 3 // 最大连续错误次数

  // 请求后端数据并更新图表
  const fetchData = async () => {
    try {
      const data = await fetchResourceMonitorData()
      console.log('处理后数据:', data)

      // 验证数据结构
      if (!data || !data.gpuUsageData || !data.networkDelayData) {
        throw new Error('数据结构不完整')
      }
      
      // 更新 GPU 使用率数据
      // 检查是否收到了完整数组，如果是，直接使用
      const newGpuData = {}
      for (const key of ['edge1', 'edge2', 'cloud']) {
        if (data.gpuUsageData[key] && Array.isArray(data.gpuUsageData[key])) {
          if (data.gpuUsageData[key].length === 5) {
            // 如果收到完整的5个数据点，直接使用
            newGpuData[key] = [...data.gpuUsageData[key]]
            console.log(`使用后端完整 GPU ${key} 数据:`, newGpuData[key])
          } else if (data.gpuUsageData[key].length > 0) {
            // 如果只收到部分数据，使用滑动窗口
            newGpuData[key] = [...gpuUsageData.value[key].slice(1), data.gpuUsageData[key][0]]
            console.log(`滑动更新 GPU ${key} 数据:`, newGpuData[key])
          } else {
            // 如果数组为空，保持现有数据
            newGpuData[key] = [...gpuUsageData.value[key]]
          }
        } else {
          // 无效数据，保持现有数据
          newGpuData[key] = [...gpuUsageData.value[key]]
        }
      }
      
      // 使用响应式更新
      gpuUsageData.value = newGpuData
      
      // 更新网络延迟数据
      const newNetworkData = {}
      for (const key of ['edge1', 'edge2']) {
        if (data.networkDelayData[key] && Array.isArray(data.networkDelayData[key])) {
          if (data.networkDelayData[key].length === 5) {
            // 如果收到完整的5个数据点，直接使用
            newNetworkData[key] = [...data.networkDelayData[key]]
            console.log(`使用后端完整网络 ${key} 数据:`, newNetworkData[key])
          } else if (data.networkDelayData[key].length > 0) {
            // 如果只收到部分数据，使用滑动窗口
            newNetworkData[key] = [...networkDelayData.value[key].slice(1), data.networkDelayData[key][0]]
            console.log(`滑动更新网络 ${key} 数据:`, newNetworkData[key])
          } else {
            // 如果数组为空，保持现有数据
            newNetworkData[key] = [...networkDelayData.value[key]]
          }
        } else {
          // 无效数据，保持现有数据
          newNetworkData[key] = [...networkDelayData.value[key]]
        }
      }
      
      // 使用响应式更新
      networkDelayData.value = newNetworkData
      
      // 重置错误计数
      errorCount = 0
      
      return { 
        gpuUsageData: gpuUsageData.value, 
        networkDelayData: networkDelayData.value 
      }
    } catch (error) {
      errorCount++
      console.error(`获取资源监控数据失败 (${errorCount}/${MAX_ERRORS}):`, error)
      
      // 如果连续错误超过最大次数，停止轮询
      if (errorCount >= MAX_ERRORS) {
        console.error('连续错误次数过多，停止数据轮询')
        stopPolling()
      }
      
      return { 
        gpuUsageData: gpuUsageData.value, 
        networkDelayData: networkDelayData.value 
      }
    }
  }

  // 开始定时获取数据
  const startPolling = (interval = 1000) => {
    // 停止现有定时器
    stopPolling()
    
    // 重置错误计数
    errorCount = 0
    
    // 先立即获取一次数据
    fetchData()
    
    // 然后设置定时器
    dataFetchTimer = setInterval(fetchData, interval)
    
    console.log(`开始资源监控数据轮询，间隔 ${interval} ms`)
  }

  // 停止定时获取数据
  const stopPolling = () => {
    if (dataFetchTimer) {
      clearInterval(dataFetchTimer)
      dataFetchTimer = null
      console.log('停止资源监控数据轮询')
    }
  }

  // 组件卸载时清理定时器
  onUnmounted(() => {
    stopPolling()
  })

  return {
    gpuUsageData,
    networkDelayData,
    fetchData,
    startPolling,
    stopPolling
  }
} 